<template>
	<view class="container">
		<!-- 海报图 -->
		<canvas canvas-id="invitation-post" :style="{ width: '305px', height: '403px' }"></canvas>
	</view>
</template>
<script>
	export default {
		watch: {
			'id': function(v) {
				console.log("新任务id", v)
				this.getPostUrl()
			},
		},
		props: {
			//任务id
			id: {
				type: Number,
				default: 0
			},
			//用户头像
			avatar: {
				type: String,
				default: '',
			},
			//任务名称 
			taskName: {
				type: String,
				default: ''
			},
			//工作类型
			taskType: {
				type: Number,
				default: 0
			},
			//用户名
			userName: {
				type: String,
				default: '用户名'
			},
			//报酬
			reward: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				postUrlTask: '', //任务图片
			};
		},
		methods: {
			// 获取海报
			getPostUrl() {
				let qrcode = uni.getStorageSync('qrcode')
				let unit = this.taskType == 0 ? '元/小时' : this.taskType == 1 ? '元/件' : '元/天'
				let reward = this.reward.divide(100)
				let avatar = uni.getStorageSync('imgPath') + this.avatar
				console.log('海报组件~~~~~', avatar, this.userName, qrcode, this.taskName, reward, unit)
				this.createdPost(avatar, this.userName, qrcode, this.taskName, reward, unit)
			},
			// 创建画布
			createdPost(avatar, userName, qrcode, taskName, reward, unit) {
				console.log('画画')
				const ctx = uni.createCanvasContext('invitation-post')
				//背景图片
				ctx.drawImage('https://images.linglinggong.net/static/icon1/08.png', 0, 0, 305, 403)
				//找零工logo
				ctx.setFillStyle('#402110')
				ctx.font = "bold 20px PingFangSC-Medium";
				ctx.fillText('找零工', 135, 40)
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font = "14px PingFangSC-Regular";
				ctx.fillText('来自' + userName + '的分享', 163 / 2, 90 / 2 + 25)
				// 工作名称
				ctx.setFillStyle('#402110')
				ctx.font = "18px PingFangSC-Regular";
				ctx.fillText(taskName, 105 / 2, 115)
				// 工作报酬F39B19
				ctx.setFillStyle('#FF650C')
				// normal bold 18px arial,sans-serif
				ctx.font = "normal bold 18px PingFangSC-Regular"
				ctx.fillText(reward + unit, 105 / 2, 145)
				uni.downloadFile({
					url: qrcode,
					success: res => {
						//二维码
						ctx.drawImage(res.tempFilePath, 105 / 2, 310 / 2, 200, 200)
						//提示
						ctx.setFillStyle('#402110')
						ctx.font = "14px PingFangSC-Regular";
						ctx.fillText('长按二维码保存至相册', 166 / 2, 726 / 2 + 20)
						//任务头像
						ctx.arc(55, 60, 15, 0, 2 * Math.PI) // 画圆
						ctx.clip()
						ctx.drawImage('https://images.linglinggong.net/static/logo.png', 40, 45, 30, 30)
						console.log('画画2')
						ctx.draw(true, () => {
							console.log('画画3')
							uni.canvasToTempFilePath({
								canvasId: 'invitation-post',
								success: (res) => {
									console.log('画画4')
									this.postUrlTask = res.tempFilePath
									uni.setStorageSync('postUrlTask', res.tempFilePath)
									console.log('保存了海报postUrlTask', uni.getStorageSync(
										'postUrlTask'))
								},
								fail: (err) => {
									console.log('画图失败', err)
								}
							})
						})
					}
				})
			},
		},
		mounted() {
			console.log('海报组件')
			this.getPostUrl()
		}
	}
</script>
<style scoped>
	.container {
		z-index: 10;
	}
</style>
